import React, { useRef, useState } from 'react'
import My from '../My'
import Header from '../../components/Header'
import FooterBar from '../../components/FooterBar'
import touImg from '../../assets/image/头像 女孩 (1).png'
import { useNavigate } from 'react-router-dom'
import './index.css'
import { SwiperRef } from 'antd-mobile/es/components/swiper'
import { Button, Form, Input, Swiper, Tabs } from 'antd-mobile'
import { EyeInvisibleOutline, EyeOutline } from 'antd-mobile-icons'




export default function Login(props: any) {
  const navigate = useNavigate()
  const swiperRef = useRef<SwiperRef>(null)
  const [activeIndex, setActiveIndex] = useState(0)
  const [visible, setVisible] = useState(false)

  const tabItems = [
    { key: 'login', title: '登录' },
    { key: 'register', title: '注册' },
  ]

  const isToken = ''

  const onLoginFinish = (values: any) => {
    console.log('===values', values);

  }
  const onRegisterFinish = (values: any) => {
    console.log('===values', values);

  }


  const jumpPage = () => {
    navigate('/my')
  }

  if (isToken) {
    return (
      <My />
    )
  }
  return (
    <>
      <Header />
      <div className='loginMain'>
        <div className='login_img'>
          <img src={touImg} alt="" className='login_touClass' />
        </div>
        <div className='login_banner'>
          <Tabs
            activeKey={tabItems[activeIndex].key}
            onChange={key => {
              const index = tabItems.findIndex(item => item.key === key)
              setActiveIndex(index)
              swiperRef.current?.swipeTo(index)
            }}
          >
            {tabItems.map(item => (
              <Tabs.Tab title={item.title} key={item.key} />
            ))}
          </Tabs>
          <Swiper
            direction='horizontal'
            loop
            indicator={() => null}
            ref={swiperRef}
            defaultIndex={activeIndex}
            onIndexChange={index => {
              setActiveIndex(index)
            }}
          >
            <Swiper.Item>
              <div className={'content login_card'}>
                <Form
                  name='login'
                  onFinish={onLoginFinish}
                  footer={
                    <Button
                      block
                      type='submit'
                      color='primary'
                      size='large'
                      onClick={() => jumpPage()}
                    >
                      登录
                    </Button>
                  }
                >
                  <Form.Item label='用户名' name='username' rules={[{ required: true }]}>
                    <Input placeholder='请输入用户名' />
                  </Form.Item>
                  <Form.Item
                    label='密码'
                    name='password'
                    rules={[{ required: true }]}
                    extra={
                      <div className={'eye'}>
                        {!visible ? (
                          <EyeInvisibleOutline onClick={() => setVisible(true)} />
                        ) : (
                          <EyeOutline onClick={() => setVisible(false)} />
                        )}
                      </div>
                    }
                  >
                    <Input
                      placeholder='请输入密码'
                      type={visible ? 'text' : 'password'}
                    />
                  </Form.Item>
                </Form>
                <div className='loginOrtherBtn'>
                  <div>忘记密码？</div>
                </div>
              </div>
            </Swiper.Item>
            <Swiper.Item>
              <div className={'conten register_cardt'}>
                <Form
                  name='register'
                  onFinish={onRegisterFinish}
                  footer={
                    <Button
                      block
                      type='submit'
                      color='primary'
                      size='large'
                      onClick={() => jumpPage()}
                    >
                      注册
                    </Button>
                  }
                >
                  <Form.Item label='用户名' name='username' rules={[{ required: true }]}>
                    <Input placeholder='请输入用户名' />
                  </Form.Item>
                  <Form.Item
                    label='密码'
                    name='password'
                    rules={[{ required: true }]}
                    extra={
                      <div className={'eye'}>
                        {!visible ? (
                          <EyeInvisibleOutline onClick={() => setVisible(true)} />
                        ) : (
                          <EyeOutline onClick={() => setVisible(false)} />
                        )}
                      </div>
                    }
                  >
                    <Input
                      placeholder='请输入密码'
                      type={visible ? 'text' : 'password'}
                    />
                  </Form.Item>
                  <Form.Item label='手机号' name='phone' rules={[{ required: true }]}>
                    <Input placeholder='请输入手机号' />
                  </Form.Item>
                  <Form.Item label='短信验证码' name='yanzheng' extra={<a>发送验证码</a>}>
                    <Input placeholder='请输入验证码' />
                  </Form.Item>
                </Form>
              </div>
            </Swiper.Item>
          </Swiper>
        </div>

      </div>
      <FooterBar />
    </>
  )
}
